<script lang="ts" setup>
import { vTooltip } from "floating-vue";

withDefaults(
  defineProps<{
    tooltip?: string;
    selected?: boolean;
  }>(),
  {
    tooltip: undefined,
    selected: false,
  }
);
</script>

<template>
  <div
    v-tooltip="tooltip"
    class="editor-block__actions-button"
    :class="{
      'is-selected': selected,
    }"
  >
    <slot name="icon" />
  </div>
</template>

<style lang="scss">
.editor-block__actions-button {
  cursor: pointer;
  border-radius: 0.375rem; // rounded-md
  background-color: var(--editor-card-hover-bg);
  padding: 0.375rem; // p-1.5
  transition: background-color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  &:hover {
    background-color: var(--editor-button-hover-bg);
  }

  &.is-selected {
    color: var(--editor-primary-color);
    background-color: var(--editor-background-active);

    svg {
      color: var(--editor-primary-color);
      fill: var(--editor-primary-color);
      stroke: var(--editor-primary-color);
    }
  }

  // 统一图标大小
  :deep(svg) {
    width: 1.25rem;
    height: 1.25rem;
  }
}
</style>
